<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ajax</title>
		<link rel="stylesheet" type="text/css" href="frame/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	</head>

	<body>
		<div id="aa" class="row">
			<div class="col-xs-4">
				<p>①<span id="yi"></span></p>
				<p>②<span id="er"></span></p>
				<p>③<span id="san"></span></p>
			</div>
			<div class="col-xs-4">
				<button type="button" onclick="myFunction()">  ajax异步加载text数据</button>
			</div>
			<div class="col-xs-4">
				<table id="table" class="table-bordered"></table>
			</div>
		</div>
		<div class="bb" class="container row">
			<table id="tab2" class="table-boedered"></table>
			<input type="button" onclick="previous()" value="<<" />
            <input type="button" onclick="next()" value=">>" />
		</div>

		<script src="frame/jquery-3.1.1.min.js"></script>
		<script src="frame/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			var xmlHttp;
			
			function loadXmlDoc(url, fcn) {
				//检查是否支持XMLHttpRequest对象
				if(window.XMLHttpRequest) {
					//	HttpRequest对象用于与服务器交互数据,实现局部加载更新数据
					xmlHttp = new XMLHttpRequest();
				} else {
					//IE5,IE6用ActiveXObject对象
					xmlHttp = new ActiveXObject();
				}
				//存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
				xmlHttp.onreadystatechange = fcn;
				/* true（异步）或 false（同步）
                (GET比POST简单也更快);(POST比GET更稳定更可靠,POST適用于向服务器发送大量数据，無法使用緩存數據)
                当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：*/
				xmlHttp.open("GET", url, true);
				xmlHttp.send();
			}

			function myFunction() {
				//將參數傳給loadXmlDoc得到數據
				loadXmlDoc("data/ajax1.xml", function() {
					/*	readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
					0: 请求未初始化
					1: 服务器连接已建立
					2: 请求已接收
					3: 请求处理中
					4: 请求已完成，且响应已就绪*/
					if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
						getXmlData(this);
						//将xml转换为JavaScript
						/*aa=eval("("+this.responseText+")");
						document.getElementById("san").innerHTML = aa.title;*/
					}
				});
			}
			
			/*
			 * 方法①显示全部数据
			 * */
			function getXmlData(xml) {
				//獲取XML數據
				var loadDoc = xml.responseXML;
				//聲明表格變量
				var table = "<thead><tr><td>標題</td><td>內容</td></tr></thead>";
				//獲得數據中的對象
				var data = loadDoc.getElementsByTagName("one");
				//循環數據保存到表格中
				for(var i = 0; i < data.length; i++) {
					table += "<tbody><tr><td>" +
						data[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
						"</td><td>" +
						data[i].getElementsByTagName("conten")[0].childNodes[0].nodeValue +
						"</td></tr></tbody>";
				}
				document.getElementById("yi").innerHTML = xmlHttp.status;
				document.getElementById("er").innerHTML = xmlHttp.statusText;
				document.getElementById("san").innerHTML = xmlHttp.responseText;
				document.getElementById("table").innerHTML = table;
			}
			
			/*
			 * 方法②分页显示数据
			 * */
			var xmlHttp2=new XMLHttpRequest();
				  xmlHttp2.open("GET","data/ajax1.xml",false);
				  xmlHttp2.send();
			var i=0;
			var vlu=xmlHttp2.responseXML;
			var x=vlu.getElementsByTagName("one");
			function  pagingData(){
				x=vlu.getElementsByTagName("one");
				tit=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
				con=(x[i].getElementsByTagName("conten")[0].childNodes[0].nodeValue);
				document.getElementById("tab2").innerHTML="<tr><td>"+tit+"</td><td>"+con+"</td></tr>"
			}
			function next(){
				if(i<x.length-1){
					i++;
					pagingData(this);
				}
			}
			function previous(){
				if(i>0){
					i--;
					pagingData();
				}
			}
		</script>
	</body>

</html>